<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/tag.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="${ctx}/resources/js/jquery-1.6.js" type="text/javascript"></script>
<script src="${ctx}/resources/js/jquery.jqzoom-core.js" type="text/javascript"></script>
<script type="text/javascript" src="${ctx}/resources/js/jQueryRotate.2.2.js"></script>
<link rel="stylesheet" href="${ctx}/resources/css/jquery.jqzoom.css" type="text/css">
<style type = "text/css">

body{margin:0px;padding:0px;font-family:Arial;}
a img,:link img,:visited img { border: none; }
table { border-collapse: collapse; border-spacing: 0; }
:focus { outline: none; }
*{margin:0;padding:0;}
p, blockquote, dd, dt{margin:0 0 8px 0;line-height:1.5em;}
fieldset {padding:0px;padding-left:7px;padding-right:7px;padding-bottom:7px;}
fieldset legend{margin-left:15px;padding-left:3px;padding-right:3px;color:#333;}
dl dd{margin:0px;}
dl dt{}

.clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden;}
.clearfix{display:block;zoom:1}


ul#thumblist{display:block;}
ul#thumblist li{float:left;margin-right:2px;list-style:none;}
ul#thumblist li a{display:block;border:1px solid #CCC;}
ul#thumblist li a.zoomThumbActive{
    border:1px solid red;
}

.jqzoom{

	text-decoration:none;
	float:left;
}
</style>

</head>

<body>
<div class="clearfix" id="content" style="margin-top:100px;margin-left:350px; height:500px;width:500px;" >
    <div class="clearfix">
        <a href="${ctx}/resources/imgProd/triumph_big1.jpg" id="imgProd" class="jqzoom" rel='gal1'  title="triumph" style="height:250px;width:250px;" >
            <img src="${ctx}/resources/imgProd/triumph_big1.jpg"  title="triumph" id="Imgbox"  style="border: 1px solid #666;width:250px;height:250px">
        </a>
    </div>
	<br/>
	
 <div class="clearfix" >
	<ul id="thumblist" class="clearfix" >
		<li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: '${ctx}/resources/imgProd/triumph_big1.jpg',largeimage: '${ctx}/resources/imgProd/triumph_big1.jpg'}"><img src='${ctx}/resources/imgProd/thumbs/triumph_thumb1.jpg'></a></li>
		<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: '${ctx}/resources/imgProd/triumph_small2.jpg',largeimage: '${ctx}/resources/imgProd/triumph_big2.jpg'}"><img src='${ctx}/resources/imgProd/thumbs/triumph_thumb2.jpg'></a></li>
		<li><a  href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: '${ctx}/resources/imgProd/triumph_small3.jpg',largeimage: '${ctx}/resources/imgProd/triumph_big3.jpg'}"><img src='${ctx}/resources/imgProd/thumbs/triumph_thumb3.jpg'></a></li>
	</ul>
	</div>
	<input type="button" value="向右旋转90" onclick="chg_rotate90();">
	<input type="button" value="向右旋转180" onclick="chg_rotate180();">
	<input type="button" value="向右旋转270" onclick="chg_rotate270();">
	<input type="button" value="向右旋转360" onclick="chg_rotate360();">
	<input type="input" id="input_msg"/>
</div>
 <script type="text/javascript">
	 	 $(
		 	function() {
				my_jqzoom = $('.jqzoom').jqzoom({
			            zoomType: 'standard',
			            lens:true,
			            preloadImages: true,
			            zoomWidth: 350,
			            zoomHeight: 350,
			            alwaysOn:true
			     });
		 	});
</script>
</body>
</html>